<template>
	<div class="portal_form_wrapper" v-loading="loading">
		<div class="button">
			<el-button class="cancel" size="small" @click="handleHeaderBack()">取消</el-button>
			<el-button class="confirm" size="small" type="primary" @click="handleSubmitForm()">确认</el-button>
		</div>
		<el-page-header @back="handleHeaderBack()" :content="pageHeaderContent"></el-page-header>
		<el-form ref="siteForm" :model="portalForm" :rules="portalRules">
			<el-row :gutter="16" type="flex">
				<el-col :span="16">
					<el-col :span="24">
						<el-form-item label="站点名称" prop="name">
							<el-input v-model="portalForm.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="19">
						<el-form-item label="站点域名" prop="httpAddr">
							<el-input v-model="portalForm.httpAddr">
								<el-select slot="prepend" v-model="portalForm.httpType" style="width: 90px">
									<el-option label="http://" value="1"></el-option>
									<el-option label="https://" value="2"></el-option>
								</el-select>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="站点主色" prop="color">
							<color-picker v-model="portalForm.color"></color-picker>
						</el-form-item>
					</el-col>
					<el-col :span="24" class="site_feature">
						<el-form-item label="强制登录" prop="mustLogin">
							<el-switch v-model="portalForm.mustLogin" :active-value="1" :inactive-value="2"></el-switch>
						</el-form-item>
						<el-form-item label="用户注册" prop="isRegister">
							<el-switch v-model="portalForm.isRegister" :active-value="1" :inactive-value="2"></el-switch>
						</el-form-item>
						<el-form-item label="发布审核" prop="isAudit">
							<el-switch v-model="portalForm.isAudit" :active-value="1" :inactive-value="2"></el-switch>
						</el-form-item>
						<el-form-item label="人像检索" prop="isFace">
							<el-switch v-model="portalForm.isFace" :active-value="1" :inactive-value="2"></el-switch>
						</el-form-item>
						<el-form-item label="内容下载" prop="isDownload">
							<el-switch v-model="portalForm.isDownload" :active-value="1" :inactive-value="2"></el-switch>
						</el-form-item>
						<el-form-item label="是否有小程序端" prop="isApplet">
							<el-switch v-model="portalForm.isApplet" :active-value="1" :inactive-value="2"></el-switch>
						</el-form-item>
						<el-form-item label="是否关闭评论" prop="isComment">
							<el-switch v-model="portalForm.isComment" :active-value="1" :inactive-value="2"></el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="站点管理员" prop="userList">
							<person-list v-model="portalForm.userList"></person-list>
						</el-form-item>
					</el-col>
					<el-col :span="24" class="site_uploader">
						<el-form-item prop="filed1">
							<template slot="label">
								站点封面图
								<el-tooltip effect="dark" content="建议上传尺寸为640*360的jpg图片" placement="bottom">
									<i class="el-icon-info"></i>
								</el-tooltip>
							</template>
							<sw-image-uploader v-model="portalForm.filed1" accept="jpg"></sw-image-uploader>
						</el-form-item>
						<el-form-item prop="logoId">
							<template slot="label">
								网站LOGO
								<el-tooltip effect="dark" content="建议上传尺寸为128*128的png图片" placement="bottom">
									<i class="el-icon-info"></i>
								</el-tooltip>
							</template>
							<sw-image-uploader v-model="portalForm.logoId" accept="png"></sw-image-uploader>
						</el-form-item>
						<el-form-item prop="filed2">
							<template slot="label">
								首页尾LOGO
								<el-tooltip effect="dark" content="建议上传尺寸为128*128的png图片" placement="bottom">
									<i class="el-icon-info"></i>
								</el-tooltip>
							</template>
							<sw-image-uploader v-model="portalForm.filed2" accept="png"></sw-image-uploader>
						</el-form-item>
						<el-form-item prop="filed3">
							<template slot="label">
								首页背景图片
								<el-tooltip effect="dark" content="建议上传尺寸为1920*1080的jpg图片" placement="bottom">
									<i class="el-icon-info"></i>
								</el-tooltip>
							</template>
							<sw-image-uploader v-model="portalForm.filed3" accept="jpg" clip></sw-image-uploader>
						</el-form-item>
						<el-form-item prop="filed4">
							<template slot="label">
								登录背景图片
								<el-tooltip effect="dark" content="建议上传尺寸为1920*1080的jpg图片" placement="bottom">
									<i class="el-icon-info"></i>
								</el-tooltip>
							</template>
							<sw-image-uploader v-model="portalForm.filed4" accept="jpg"></sw-image-uploader>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="版权信息" prop="content">
							<u-Editor v-model="portalForm.content" :z-index="2000"></u-Editor>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col :span="8">
					<el-form-item label="站点模板" prop="template">
						<template-radio v-model="portalForm.template"></template-radio>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
import personList from './person';
import colorPicker from './color';
import imageUploader from './uploader';
import templateRadio from './template';
import { mapGetters } from 'vuex';
import { userDetail } from '@/api/system/tbSysUser';
import { getPortalSiteBaseInfo, addedPortalSite, updatePortalSite } from '@/api/portal/tbSiteInfo';
export default {
	components: { personList, colorPicker, templateRadio, imageUploader },
	data() {
		return {
			loading: false,
			portalForm: {},
			portalRules: {
				name: [{ required: true, message: '请填写站点名称', trigger: 'blur' }],
				color: [{ required: true, message: '请选择站点主色', trigger: 'change' }],
				httpAddr: [{ required: true, message: '请填写站点域名', trigger: 'blur' }]
				// filed1: [{ required: true, message: '请上传站点封面图', trigger: 'change' }]
			}
		};
	},
	computed: {
		...mapGetters(['userInfo', 'dictConst']),
		siteId() {
			return this.$route.query.id || '';
		},
		addOrEdit() {
			return !this.siteId;
		},
		callFunction() {
			return eval(this.addOrEdit ? addedPortalSite : updatePortalSite);
		},
		pageHeaderContent() {
			return this.addOrEdit ? '新增站点' : '编辑站点';
		}
	},
	watch: {
		siteId: {
			async handler(id) {
				this.loading = true;
				if (this.addOrEdit) {
					this.portalForm = await this.initializeFormData();
				} else {
					this.portalForm = await this.getSiteInfoData(id);
				}
				this.loading = false;
			},
			immediate: true
		}
	},
	methods: {
		//获取用户详情
		async getUserDetail(id) {
			let result = await userDetail(id).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				return Promise.resolve(datas);
			}
		},

		//获取用户头像
		getUserAvatars(arr) {
			let promiseArr = arr.map((item) => this.getUserDetail(item.userId));
			return Promise.all(promiseArr);
		},

		//格式化用户数据
		async formatUserData(arr) {
			let users = await this.getUserAvatars(arr);
			return users.map((item) => {
				let picPath = !!item.picId && item.picId !== '-1' ? item.picPath : undefined;
				return { relId: item.id, relName: item.userName, picPath };
			});
		},

		//获取站点信息
		async getSiteInfoData(id) {
			let result = await getPortalSiteBaseInfo(id).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				let styleData = !this.$isJSON(datas.style) ? {} : JSON.parse(datas.style);
				datas['userList'] = await this.formatUserData(datas.userMList);
				datas['isComment'] = styleData.isComment;
				datas['color'] = styleData.color;
				return Promise.resolve(datas);
			}
		},

		//获取字典常量详情
		async initializeFormData() {
			let params = { httpAddr: '', httpType: '1' };
			let userList = [{ userId: this.userInfo.id }];
			params['template'] = this.dictConst['SITE_TEMPLATE'];
			params['userList'] = await this.formatUserData(userList);
			return params;
		},

		//返回站点管理
		handleHeaderBack() {
			this.$router.back();
		},

		//提交表单
		handleSubmitForm() {
			this.$refs['siteForm'].validate((valid) => {
				if (!valid) return false;
				this.submitFormRequest();
			});
		},

		//格式化请求参数
		formatRequestParams() {
			let params = { ...this.portalForm, del: 1 };
			let styleData = { color: params.color, isComment: params.isComment };
			let addArrs = params.userList.filter((item) => !params.userMList.some((n) => n.userId === item.relId));
			let delArrs = params.userMList.filter((item) => !params.userList.some((n) => n.relId === item.userId));
			let delOperArrs = delArrs.map((n) => ({ relId: n.userId, relName: n.userName, operType: 2 }));
			params['userList'] = [...addArrs.map((n) => ({ ...n, operType: 1 })), ...delOperArrs];
			params['style'] = JSON.stringify(styleData);
			delete params.isComment;
			delete params.color;
			return params;
		},

		//表单提交请求
		async submitFormRequest() {
			let params = this.formatRequestParams();
			let result = await this.callFunction(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success(`${this.pageHeaderContent}成功`);
				this.$router.back();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.portal_form_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
	.el-page-header {
		padding: 16px;
		flex-shrink: 0;
		border-bottom: solid 1px #ebeef5;
	}
	.button {
		position: absolute;
		top: 12px;
		right: 12px;
	}
	.el-form {
		flex: 1;
		padding: 16px;
		overflow: hidden;
		overflow-y: auto;
	}
}
.portal_form_wrapper::v-deep {
	.el-form-item__label {
		float: none;
		display: block;
		font-weight: bold;
		text-align: left;
		line-height: 1;
		margin-bottom: 12px;
	}
	.el-form-item__content {
		line-height: 1;
	}
}

.site_feature::v-deep,
.site_uploader::v-deep {
	.el-form-item {
		float: left;
		margin-right: 20px;

		&:last-child {
			margin-right: 0;
		}
	}

	.el-form-item__label {
		padding-right: 8px;
	}
}
</style>
